<template>
    <div class="box">
      <header class="header">
        <ul>
          <li @click="back"><i class="iconfont icon-arrow-right-copy-copy"></i></li>
          <li><h5>社区</h5></li>
          <li><i class="iconfont icon-fangdajing"></i></li>
        </ul>
        <div class="datekind">
            <ul>
              <router-link :to="item.path" tag="li" v-for = "(item, index) of datelist" :key = "index">
                <img :src="item.img" alt="">
                <p>{{item.date}}</p>
              </router-link>
            </ul>
          </div>
      </header>
        <div class="content">        
          <div class="datecon">
            <router-view></router-view>
          </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { PaletteButton } from 'mint-ui'
Vue.use(PaletteButton)
export default {
  name:'Community',
  data () {
    return {
      datelist: [{
        path: 'date1',
        img: '@/../static/xiao5.jpg',
        date: '备孕'
      }, {
        path: 'date2',
        img: '@/../static/xiao1.jpg',
        date: '孕期'
      }, {
        path: 'date3',
        img: '@/../static/xiao0.jpg',
        date: '育儿'
      }, {
        path: 'date4',
        img: '@/../static/xiao3.jpg',
        date: '家常'
      }, {
        path: 'date5',
        img: '@/../static/xiao4.jpg',
        date: '旅游'
      }]
    }
  },
  methods: {
    back () {
      this.$router.push('/life')
    },
    main_log(val) {
      console.log('main_log', val);
    },
    sub_log(val) {
      console.log('sub_log', val);
      this.$refs.target_1.collapse();
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.box .header {
   @include rect(100%, 180px);
   @include background-color(#EAEAEA);
   background:url(/@/../static/05.jpg) no-repeat 50% 90%;
   ul {
     @include rect (95%,40px);
    // background:red;
    margin:0 auto;
    @include flexbox();
    @include justify-content(space-between);
    @include align-items();
    li {
      i{
        @include font-size(15px);
        @include text-color(#101010);
      }
      h5 {
        @include font-size(15px);
        @include text-color(#101010);
        @include font-weight(100);
      }
    }
  }
.datekind {
  @include rect(100%,70px);
  position: fixed;
  top:15%;
  ul {
    @include rect(100%,70px);
    @include flexbox();
    // @include flex-direction(column);
    @include justify-content(space-around);
    @include align-items();
    li {
      @include rect(50px, 70px);
      @include flexbox();
      @include align-items();
      @include justify-content();
      @include flex-direction(column);
      img{
        @include rect(44px, 44px);
        border-radius: 50%;
      }
      p {
        font-size: 12px;
        color:#333;
      }
      &.router-link-exact-active.router-link-active {
        p {color:#FB901E;}
      }
    }
  }
}
}
.mint-palette-button {
  position: absolute;
  bottom:2%;
  right:90%;
  // line-height: 0.2rem;
  .mint-sub-button-container>* {
    width:30px;
    height:30px;
    border-radius: 50%;
    font-size: 10px;
    background:#f8f8f8;
    line-height: 30px;
    text-align: center;
  }
 }
 .header{
    position: fixed;
    top: 0

 }
</style>
